HTMX-এ hx-trigger ব্যবহার করে ইভেন্ট হ্যান্ডলিং
HTMX এ hx-trigger attribute ব্যবহার করে বিভিন্ন ইউজার ইভেন্টের ভিত্তিতে HTTP রিকোয়েস্ট পাঠানো যায়। এটি বিভিন্ন ধরনের ইভেন্ট যেমন click, keyup, change, ইত্যাদি হ্যান্ডল করতে সহায়ক। নিচে hx-trigger এর ব্যবহার এবং উদাহরণসহ ইভেন্ট হ্যান্ডলিং বর্ণনা করা হলো।
১. hx-trigger এর মৌলিক ধারণা
hx-trigger: এই attribute ব্যবহার করে আপনি নির্দিষ্ট ইভেন্টের ভিত্তিতে HTMX অ্যাকশন নির্ধারণ করতে পারেন। এটি আপনাকে বিভিন্ন ইউজার ইন্টারঅ্যাকশন অনুযায়ী AJAX কল পাঠাতে দেয়।
২. উদাহরণ ১: ক্লিক ইভেন্ট হ্যান্ডলিং
২.১. HTML কোড
এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি বোতামে ক্লিক করলে ডেটা লোড হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Trigger Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h1>HTMX Click Trigger Example</h1>
<button hx-get="/load-data" hx-target="#data-container" hx-trigger="click">Load Data</button>
<div id="data-container"></div>
</body>
</html>
২.২. সার্ভার সাইড কোড (Flask)
from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/load-data')
def load_data():
return "<p>This content is loaded on button click!</p>"
if __name__ == '__main__':
app.run(debug=True)
- ব্যাখ্যা: এখানে বোতামে ক্লিক করলে
/load-dataURL থেকে তথ্য লোড হবে এবং#data-containerডিভে সন্নিবেশিত হবে।
৩. উদাহরণ ২: কী আপ ইভেন্ট হ্যান্ডলিং
৩.১. HTML কোড
এখন আমরা একটি ইনপুট ফিল্ডের উপর keyup ইভেন্ট ব্যবহার করব:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Trigger Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h1>HTMX Keyup Trigger Example</h1>
<input type="text" id="search" hx-get="/search" hx-target="#results" hx-trigger="keyup" placeholder="Type to search...">
<div id="results"></div>
</body>
</html>
৩.২. সার্ভার সাইড কোড (Flask)
@app.route('/search')
def search():
query = request.args.get('query', '')
# Dummy search logic, replace with real logic
return f"<p>Results for: {query}</p>"
- ব্যাখ্যা: এখানে, ইনপুট ফিল্ডে টাইপ করার সময়
keyupইভেন্টটি/searchURL-এ GET রিকোয়েস্ট পাঠায় এবং প্রাপ্ত ফলাফল#resultsডিভে সন্নিবেশিত হয়।
৪. উদাহরণ ৩: পরিবর্তন ইভেন্ট হ্যান্ডলিং
৪.১. HTML কোড
এখন আমরা একটি সিলেক্ট ফিল্ডের উপর change ইভেন্ট ব্যবহার করব:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Trigger Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h1>HTMX Change Trigger Example</h1>
<select hx-get="/select-option" hx-target="#option-result" hx-trigger="change">
<option value="">Select an option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
<div id="option-result"></div>
</body>
</html>
৪.২. সার্ভার সাইড কোড (Flask)
@app.route('/select-option')
def select_option():
selected_option = request.args.get('option', '')
return f"<p>You selected: {selected_option}</p>"
- ব্যাখ্যা: সিলেক্ট বক্স থেকে একটি অপশন পরিবর্তন করার সময়
changeইভেন্টটি/select-optionURL-এ GET রিকোয়েস্ট পাঠায় এবং নির্বাচিত অপশনটি#option-resultডিভে প্রদর্শন করে।
সারসংক্ষেপ
hx-trigger: HTMX এ বিভিন্ন ইউজার ইভেন্ট যেমনclick,keyup,changeইত্যাদি হ্যান্ডল করার জন্য ব্যবহৃত হয়।- ডাইনামিক ইন্টারঅ্যাকশন: HTMX ব্যবহার করে HTML এলিমেন্টগুলিতে সরাসরি AJAX কল যুক্ত করা যায়, যা ওয়েব অ্যাপ্লিকেশনগুলিকে আরো ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে।
HTMX এর মাধ্যমে ইভেন্ট হ্যান্ডলিং একটি শক্তিশালী এবং সহজ পদ্ধতি, যা ডেভেলপারদের জন্য ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক।
Content added By
Read more
